<template>
  <div id="chatRoom">
		<div class="main">
			<div class="content">
				<ul>
					<li v-for="item in messageList">
						<div v-if="item.type==1" class="system">{{item.message}}</div>
						<div v-if="item.type==2" class="self">
							<p class="name">我</p>
							<p><span class="message">{{item.message}}</span></p>
						</div>
						<div v-if="item.type==3" class="others">
							<p class="name">游客{{item.userId}}说：</p>
							<p><span class="message">{{item.message}}</span></p>
						</div>
					</li>
				</ul>
			</div>
			<div class="text">				
				<mu-text-field v-model="message" hintTextClass="helpText" hintText="请输入。。。" underlineFocusClass="line" fullWidth multiLine :rows="3" :rowsMax="6"/>			
				<mu-raised-button @click="submit" label="发送" secondary/>
			</div>
		</div>
  </div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>
